<template>
    <basic-container>
        <el-row :gutter="10"
                class="mb8">
            <el-col :span="1.5">
                <el-button type="primary"
                           icon="el-icon-plus"
                           size="mini"
                           @click="handleAdd"
                >新增机构
                </el-button>
            </el-col>
        </el-row>
        <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="name" label="名称" :show-overflow-tooltip="true" width="160"></el-table-column>
            <el-table-column prop="icon" label="图标" :show-overflow-tooltip="true" align="center">
                <template slot-scope="scope">
                    <i :class="scope.row.icon"></i>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="120" :formatter="typeFormate"></el-table-column>
            <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true" width="160"></el-table-column>
            <el-table-column prop="component" label="组件地址" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.isFrame==0">{{scope.row.component}}</span>
                    <span v-else>{{scope.row.url}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="flag" label="状态" :show-overflow-tooltip="true" width="80"
                             :formatter="flagFormate"></el-table-column>
            <el-table-column prop="orderNum" label="排序" :show-overflow-tooltip="true" width="80"></el-table-column>
            <el-table-column label="操作"
                             align="center"
                             class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="small" type="text" icon="el-icon-edit"  @click="handleUpdate(scope.row)">编辑
                    </el-button>
                    <el-button size="small" type="text" icon="el-icon-delete"
                               @click="handleDelete(scope.row)" :disabled="scope.row.children!=null">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加或编辑机构对话框 -->
        <el-dialog :title="title[statusDialog]"
                   :visible.sync="open"
                   width="40%"
                   append-to-body
                   :close-on-click-modal="false">
            <el-form ref="form"
                     :model="form"
                     :rules="rules"
                     label-width="80px">

                <el-form-item label="上级菜单"
                              prop="parentId">
                    <treeselect v-model="form.parentId" :multiple="false" :normalizer="normalizer"
                                placeholder="请选择上级菜单"
                                :options="menuOptions"/>
                </el-form-item>
                <el-form-item label="类型"
                              prop="type">
                  <el-radio-group v-model="form.type">
                    <el-radio v-for="dict in typeOptions"
                              :key="dict.dictValue"
                              :label="dict.dictValue">{{dict.dictLabel}}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="菜单名称"
                                      prop="name">
                            <el-input v-model="form.name" placeholder="请输入名称"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="图标"
                                      prop="icon">
                            <el-input v-model="form.icon" v-popover:popover4 placeholder="请输入名称"/>
                            <el-popover
                                    ref="popover4"
                                    placement="end"
                                    width="400"
                                    trigger="click">
                                <div class="icon-body">
                                    <div class="icon-list">
                                        <div v-for="(item, index) in iconList" :key="index" >
                                            <span :class="iconClass(item.name)" @click="clickIcon(item.name)"></span>
                                        </div>
                                    </div>
                                </div>
                            </el-popover>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="form.type=='2'||form.type=='1'">
                    <el-col :span="12">
                        <el-form-item label="是否外链"
                                      prop="isFrame">
                            <el-radio-group v-model="form.isFrame"  :disabled="form.type=='1'">
                                <el-radio v-for="dict in frameOptions"
                                          :key="dict.dictValue"
                                          :label="dict.dictValue">{{dict.dictLabel}}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="组件路由"
                                      prop="orderNum">
                            <el-input v-model="form.url" placeholder="请输入名称"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="组件地址"
                              prop="component" v-if="form.type=='2'">
                    <el-input v-model="form.component" placeholder="请输入名称" :disabled="form.isFrame=='1'"/>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="是否隐藏"
                                      prop="isHidden">
                            <el-radio-group v-model="form.isHidden">
                                <el-radio v-for="dict in hiddenOptions"
                                          :key="dict.dictValue"
                                          :label="dict.dictValue">{{dict.dictLabel}}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="排序"
                                      prop="orderNum">
                            <el-input-number v-model="form.orderNum" :min="1" :max="100"
                                             label="描述文字"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="是否启用"
                              prop="flag">
                    <el-radio-group v-model="form.flag">
                        <el-radio v-for="dict in flagOptions"
                                  :key="dict.dictValue"
                                  :label="dict.dictValue">{{dict.dictLabel}}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer"
                 class="dialog-footer">
                <el-button type="primary"
                           @click="submitForm">确 定
                </el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>


    </basic-container>
</template>

<script>
    import {addMenu, delMenu, listMenu, updateMenu, getMenu} from "@/api/system/menu";
    const appData = require('@/config/iconfont.json');
    export default {
        data() {
            return {
                tableData: [],
                open: false,
                statusDialog: '',
                title: {
                    add: '新增菜单',
                    edit: '编辑菜单'
                },
                menuOptions: [],
                typeOptions: [],
                flagOptions: [],
                hiddenOptions: [],
                frameOptions: [],
                iconList:[],
                iconName:'',
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    name: [
                        {required: true, message: "名称不能为空", trigger: "blur"}
                    ],
                    type: [
                        {required: true, message: "类型不能为空", trigger: "blur"}
                    ],
                    person: [
                        {required: true, message: "负责人不能为空", trigger: "blur"}
                    ],
                    tel: [
                        {required: true, message: "电话不能为空", trigger: "blur"},
                        {
                            validator: (rule, value, callback) => {
                                if (value) {
                                    if (!/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value)) {
                                        callback(new Error("请输入正确的电话号码！"));
                                    } else {
                                        callback();
                                    }
                                } else {
                                    callback();
                                }
                            },
                            trigger: "blur"
                        }
                    ]
                }
            }
        },
        created() {
            this.getList();
            this.getMenuList();
            this.iconList=appData.glyphs;
            this.getDicts("sys_status").then(response=>{
                this.flagOptions =response.data.data;
            });
            this.getDicts("sys_whether").then(response=>{
                this.frameOptions =response.data.data;
            });
            this.getDicts("sys_menu_type").then(response=>{
                this.typeOptions =response.data.data;
            });
            this.getDicts("menu_hidden").then(response=>{
                this.hiddenOptions =response.data.data;
            });
        },
        methods: {
            selected(name) {
                this.form.icon = name;
            },
            getList() {
                this.loading = true;
                listMenu().then(response => {
                    const data = response.data.data;
                    this.tableData = this.handleTree(data, "id");
                    this.loading = false;
                });
            },
            getMenuList() {
                getMenu().then(response => {
                    this.menuOptions = JSON.parse(JSON.stringify(response.data.data));
                });
            },
            normalizer(node) {
                //去掉children=null的属性
                if (node.children == null || node.children == 'null') {
                    delete node.children;
                }
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                // const data = JSON.parse(JSON.stringify(row));
                this.open = true;
                this.statusDialog = 'add';
            },
            /** 编辑按钮操作 */
            handleUpdate(row) {
                if (row.parentId == "0") {
                    row.parentId = undefined;
                }
                row.isFrame = row.isFrame + "";
                row.flag = row.flag + "";
                row.isHidden = row.isHidden + "";
                row.type = row.type + "";
                this.form = JSON.parse(JSON.stringify(row));
                this.open = true;
                this.statusDialog = 'edit';
            },
            /** 提交按钮 */
            submitForm: function () {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != undefined) {
                            if (this.form.parentId==undefined) {
                                this.form.parentId = "0";
                            }
                            updateMenu(this.form).then(response => {
                                const data = response.data;
                                if (response.status===200&&data.code === "00") {
                                    this.msgSuccess("编辑成功");
                                    this.open = false;
                                    this.getList();
                                    this.getMenuList();
                                } else {
                                    this.msgError(data.msg);
                                }
                            });
                        } else {
                            if (this.form.parentId==undefined) {
                                this.form.parentId = "0";
                            }
                            addMenu(this.form).then(response => {
                                const data = response.data;
                                if (response.status===200&&data.code === "00") {
                                    this.msgSuccess("新增成功");
                                    this.open = false;
                                    this.getList();
                                    this.getMenuList();
                                } else {
                                    this.msgError(data.msg);
                                }
                            });
                        }
                    }
                });
            },

            /** 删除按钮操作 */
            handleDelete(row) {
                const userIds = row.id;
                this.$confirm('是否确认删除为"' + row.name + '"的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return delMenu(userIds);
                }).then(() => {
                    this.getList();
                    this.getMenuList();
                    this.msgSuccess("删除成功");
                }).catch(function () {
                });
            },
            typeFormate(row) {
                return this.selectDictLabel(this.typeOptions, row.type);
            },
            flagFormate(row) {
                return this.selectDictLabel(this.flagOptions, row.flag);
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,
                    icon: undefined,
                    name: undefined,
                    parentId: undefined,
                    type: "1",
                    orderNum: 1,
                    isFrame: "0",
                    flag: "0",
                    isHidden: "0",
                    url: undefined,
                    component: undefined,
                    createTime: undefined,
                    createBy: undefined,
                };
                this.resetForm("form");
            },
            iconClass(item){
                return "icon iconfont icon"+item;
            },
            clickIcon(item){
                this.form.icon="icon iconfont icon"+item;
            }
        }
    };
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
    .icon-body {
        width: 100%;
        padding: 10px;
        .icon-list {
            height: 200px;
            overflow-y: scroll;
            div {
                height: 30px;
                line-height: 30px;
                margin-bottom: 5px;
                cursor: pointer;
                width: 20%;
                float: left;
            }
            span {
                display: inline-block;
                font-size: 1.5em;
                vertical-align: -0.15em;
                fill: currentColor;
                overflow: hidden;
            }
        }
    }
</style>
